<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./bower_components/vue/dist/vue.js"></script>
    <script src="./bower_components/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <li><a v-link="{path:'/home'}">主页</a></li>
            <li><a v-link="{path:'/news'}">新闻</a></li>
        </ul>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        //1.准备一个跟组件
        var App=Vue.extend();
        //2.home news组件准备
        var Home=Vue.extend({
            template:'<h3>我是主页</h3>'
        });
        var News=Vue.extend({
            template:'<h3>我是新闻</h3>'
        });
        //3.路由准备
        var router=new VueRouter();
        //4.关联
        router.map({
            "home":{
                component:Home
            },
            "news":{
                component:News
            }
        });
        //5.启动路由
        router.start(App,'#box');
        //6.跳转
        router.redirect({
            '':'/home'
        });
//        var vm=new Vue({
//            el:"#box",
//            data:{
//                a:'bbb'
//            },
//            components:{
//                "aaa":{
//                    data(){
//                        return {
//                            msg:111,
//                            msg2:"我是父组件的数据"
//                        }
//                    },
//                    template:'#aaa'
//                }
//            }
//
//        });
    </script>
</body>
</html>